<!-- 登录页 -->
<template>
	<div class="login_wrap">
		<div class="control_wrap">
			<BaseDark />
			<BaseLocale />
		</div>
		<div class="login_content">
			<div class="login_item login_left"></div>
			<div class="login_item login_right">
				<div>
					<LoginForm></LoginForm>
					<RegisterForm></RegisterForm>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import LoginForm from "./loginForm.vue";
import RegisterForm from "./RegisterForm.vue";
</script>

<style lang="less" scoped>
.login_wrap {
	min-height: 100%;
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	// 背景
	&::after {
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		margin-left: -48%;
		height: 100%;
		background-image: url("@/assets/svg/login-bg.svg");
		background-repeat: no-repeat;
		background-position: 100%;
		background-size: auto 100%;
		@media (max-width: @screen-lg) {
			display: none;
		}
	}
	.control_wrap {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		height: var(--el-tabs-header-height);
		padding: 0 20px;
		& > div {
			margin-right: 10px;
		}
	}
	.login_content {
		flex: 1;
		position: relative;
		z-index: 1;
		margin: 20px;
		display: flex;
		.login_item {
			width: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
		}
		@media (max-width: @screen-xl) {
			justify-content: center;
			.login_left {
				display: none;
			}
		}
	}
}
</style>
